<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        #chartDom {
            width: 800px;
            height: 450px;
            margin: 20px auto;
            border: 1px solid #ccc;
        }
    </style>
</head>

<body>
    <div id="chartDom"></div>
</body>
<script src="./lib/echarts.min.js"></script>
<script>
    //获取dom
    const chartDom = document.querySelector('#chartDom')
        //初始化eharts图表对象
    const myChart = echarts.init(chartDom)

    //配置echarts图表对象
    const options = {
        // color:"#f00",
        //图表标题
        title: {
            text: 'echart入门',
            subtext: '积云招生'
        },
        //提示
        tooltip: {},
        //dataset
        dataset: [{
            source: [
                //横向映射
                ['季度','第一季度','第二季度','第三季度','第四季度'],
                ['招生',2030,3300,6600,2260],
                ['最近招生',210,320,650,300],

                //列向映射
                /*
                ['第一季度', 200, 210],
                ['第二季度', 300, 320],
                ['第三季度', 600, 650],
                ['第四季度', 260, 300],
                */

            ]
        }, {
            source: [
                 //横向映射
                ['分类','电子','服装','玩具','母婴','美妆'],
                ['销量',2300,5300,8300,5600,5600]

                 //列向映射
                /*
                ['电子', 2300],
                ['服装', 5300],
                ['玩具', 8300],
                ['母婴', 5600],
                ['美妆', 5600],
                */
            ]
        }],
        //图例
        legend: {
            data: ['招生', '销售占比', '最近招生']
        },
        //x轴
        xAxis: {
            type: 'category',
            // data:['第一季度','第二季度','第三季度','第四季度'],
        },
        //y轴
        yAxis: [{
            //最小刻度
            min:0,
            //最大刻度
            max:10000,
            //是否显示分隔线
            splitLine:{
                show:false,
                lineStyle:{
                    color:['#f00']
                }
            }
        },{
            min:0,
            max:1200,
            splitLine:{
                lineStyle:{
                    color:['#ccc']
                }
            }
            
        }],
        //系列
        series: [{
            name: '招生',
            type: 'bar',
            //数据映射改为横向
            seriesLayoutBy:'row',
            //指定第几个y轴，0第一个,1代表第2个
            yAxisIndex:0,
            datasetIndex:0,
            //改变柱形宽度
            barWidth: 65,
            encode: {
                x: 0,
                y: 1
            }

        }, {
            name: '最近招生',
            type: 'line',
             //指定第几个y轴，0第一个,1代表第2个
            yAxisIndex:1,
              //数据映射改为横向
              seriesLayoutBy:'row',
            datasetIndex:0,
            encode: {
                x: 0,
                y: 2
            }
        }, {
            name: '销售占比',
            type: 'pie',
            datasetIndex:1,
              //数据映射改为横向
            seriesLayoutBy:'row',
            //改变饼图位置，第一个参数距左距离，第二个参数距顶距离
            center: ['30%', 80],
            //饼图半径,第一个参数内半径，第二个参数外半径
            radius: ['0%', 40],
            encode: {
                itemName:0,
                value: 1
            }
        }]
    }

    //渲染echarts图表
    myChart.setOption(options)
</script>

</html>